<template>
<div class="ac-view">
  <div class="ac-bg">
    <img src="../../../static/image/activities/background.png" alt="">
  </div>
  <div class="ac-qrcode">
    <div id="qrcode"></div>
    <div class="btnLeft">
      <img src="../../../static/image/activities/btnLeft.png" alt="">
    </div>
  </div>
  <div class="qr-right">
    <img v-bind:src="avatarUrl" class="ac-avatar"/>
    <div class="btnRight">
      <img src="../../../static/image/activities/btnRight.png" alt="">
    </div>
    <p class="ac-name">
      {{name}}
    </p>
  </div>
</div>
</template>

<script>
import IctTitlebar from '../../components/IctTitleBar.vue'
import IctButton from '../../components/IctButton.vue'
import IctItem from '../../components/IctItemButton.vue'
import QRCode from '../../plugin/qrcode'
import {
  MSITE_URL
} from '../../frame/serverConfig'
import {
  userGetters
} from '../../vuex/getters'
export default {
  vuex: {
    actions: {},
    getters: {
      userName: userGetters.userName,
      userId: userGetters.userId,
      avatar: userGetters.avatar
    }
  },
  data() {
    return {
      codes: '',
      shareUrl: ''
    }
  },
  computed: {
    name () {
      return this.userName ? this.userName : ''
    },
    avatarUrl () {
      return this.avatar ? this.avatar : '../../static/image/defaultAvatar.png'
    }
  },
  route: {
    data() {
      this.showConfirm({
        message: '<p>1.通过二维码购买课程立即享优惠20元</p><p>2.推荐他人学习立即获得10元现金奖励</p><p>使用方式：截图保存</p>'
      })
      // setTimeout (() => {
      //   this.useqrcode()
      // }, 2000)
    }
  },
  methods: {
    useqrcode() {
      new QRCode(window.document.getElementById('qrcode'), {
        text: `${MSITE_URL}index.html#!/activity-course?userid=${this.userId}`,
        width: 120,
        height: 120,
        // colorDark: '#000000',
        // colorLight: '#ffffff'
        colorDark: '#C1272D',
        colorLight: '#F9EA67'
        // correctLevel : QRCode.CorrectLevel.H
      });
    }
  },
  ready() {
    this.useqrcode();
  },
  components: {
    IctTitlebar,
    IctButton,
    IctItem
  }
}
</script>

<style lang="less">
/*.ict-menberRec-view {
    p {
        margin: 0;
    }
    .ict-item:active {
        background-color: #ccc;
        color: black;
    }
    .into-icon:before {
        font-family: 'myicon';
        content: '\e913';
        color: #898989;
    }
    .ict-btn {
        width: 6.5rem;
        height: 1.8rem;
        border: 1px solid #00b0f0;
        border-radius: 5px;
        background: #fff;
        min-height: 0;
        padding: 0;
        color: #00b0f0;
        font-size: 0.85rem;
    }
    .itemOnFocus {
        background-color: black;
        color: white;
    }
}*/
.ac-qrcode {
    top:-14.3rem;
    left:-3rem;
    position:relative;
    z-index:3;
    text-align: center;
    margin-top: 3rem;
    div {
        color: #888;
        font-size:12px;
    }
    #qrcode {
        img {
            margin: 0 auto;
        }
    }
    .btnLeft{
      img{
        width:3.5rem;
      }
    }
}
.ac-bg{
  z-index:2;
  position:relative;
  top:0.5rem;
  img{
    width:100%;
  }
}
.ac-view{
  position:relative;
  z-index:1;
  background-color:#42210b;
}
.qr-right{
  position:relative;
  z-index:3;
  top:-22rem;
  left:4rem;
  text-align:center;
  .ac-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
  }
  .btnRight{
    margin:-0.5rem;
    img{
      width:3.5rem;
    }
  }
}
.ac-name{
  color:#C1272D;
}
</style>
